<template>
  <el-card>
    <div class="mt-4">
      <el-input
        v-model="input"
        placeholder="请输入关键字进行检索"
        class="input-with-select"
        style="width: 400px"
      >
        <template #prepend>
          <el-select
            v-model="select"
            placeholder="新闻类别"
            style="width: 115px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
            <!-- <el-option label="全部类别" value="0" />
            <el-option label="家庭常用" value="1" />
            <el-option label="肠胃用药" value="2" />
            <el-option label="皮肤科药" value="3" />
            <el-option label="肝胆用药" value="4" />
            <el-option label="呼吸系统" value="5" />
            <el-option label="营养滋补" value="6" /> -->
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" @click="search()" />
        </template>
      </el-input>
      <el-button type="primary" plain @click="dialogVisibleNewsAdd()"
        >新建</el-button
      >
    </div>
  </el-card>
  <el-card>
    <el-table :data="newsInfo" style="width: 100%" table-layout="auto">
      <el-table-column prop="category" label="类别">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{
              optionsForm[scope.row.category - 1].label
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="href" label="网址" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            plain
            @click="dialogVisibleNewsUpdata(scope.row)"
            >修改</el-button
          >
          <el-button
            type="danger"
            plain
            @click="dialogVisibleNewsDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pageInfo.current"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[10, 25, 50, 100]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 弹窗 -->
    <el-dialog v-model:title="title" v-model="dialogVisible" width="35%">
      <template #footer>
        <el-form
          label-width="100px"
          ref="formData"
          :rules="rules"
          :model="order"
        >
          <el-form-item label="新闻类别">
            <el-select
              v-model="newsForm.category"
              placeholder="请选择该新闻类别"
            >
              <el-option
                v-for="item in optionsForm"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
              <!-- <el-option label="家庭常用" value="1" />
              <el-option label="肠胃用药" value="2" />
              <el-option label="皮肤科药" value="3" />
              <el-option label="肝胆用药" value="4" />
              <el-option label="呼吸系统" value="5" />
              <el-option label="营养滋补" value="6" /> -->
            </el-select>
          </el-form-item>
          <el-form-item label="标题" prop="title" clearable>
            <el-input v-model="newsForm.title"></el-input>
          </el-form-item>
          <el-form-item label="网址" prop="href" clearable>
            <el-input v-model="newsForm.href"></el-input>
          </el-form-item>
        </el-form>
        <el-form-item label="简介">
          <el-input v-model="newsForm.des" type="textarea" autosize />
        </el-form-item>
        <span class="dialog-footer">
          <el-button plain @click="cancel">取 消</el-button>
          <el-button
            v-if="dialogFlag == 1"
            type="warning"
            plain
            @click="newsAdd"
            >确定添加</el-button
          >
          <el-button
            v-if="dialogFlag == 2"
            type="warning"
            plain
            @click="newsUpdate"
            >确定修改</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 对话框 -->
    <el-dialog
      v-model="dialogVisible2"
      title="提示"
      width="30%"
      :before-close="handleClose"
    >
      <span>确定删除该新闻</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button plain @click="dialogVisible2 = false">取消</el-button>
          <el-button plain type="primary" @click="newsDelete">
            确定删除
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>
<script setup>
import { queryNewsList, remove, save, update } from "../../api/modules/news";
import { onMounted, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
const input = ref("");
const select = ref("");
const options = [
  {
    value: "0",
    label: "全部类别",
  },
  {
    value: "1",
    label: "家庭常用",
  },
  {
    value: "2",
    label: "肠胃用药",
  },
  {
    value: "3",
    label: "皮肤科药",
  },
  {
    value: "4",
    label: "肝胆用药",
  },
  {
    value: "5",
    label: "呼吸系统",
  },
  {
    value: "6",
    label: "营养滋补",
  },
];
const pageInfo = ref({
  currentPage: 1,
  pageSize: 10,
  category: 0,
  title: "",
});
const optionsForm = [
  {
    value: 1,
    label: "家庭常用",
  },
  {
    value: 2,
    label: "肠胃用药",
  },
  {
    value: 3,
    label: "皮肤科药",
  },
  {
    value: 4,
    label: "肝胆用药",
  },
  {
    value: 5,
    label: "呼吸系统",
  },
  {
    value: 6,
    label: "营养滋补",
  },
];
const total = ref();
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const dialogVisible = ref(false);
const dialogVisible2 = ref(false);
const title = ref("新建新闻信息");
const dialogFlag = ref(1);
const newsInfo = ref([]);
const newsForm = ref({
  id: null,
  category: null,
  title: "",
  href: "",
  des: "",
});

const getNewsInfoList = async () => {
  let res = await queryNewsList(pageInfo.value);
  total.value = res.data.data.total;
  newsInfo.value = res.data.data.records;
  console.log((await res).data.data);
  console.log(res);
};
const search = async () => {
  pageInfo.value.title = input.value;
  if (select.value == "") {
    select.value = "0";
  }
  pageInfo.value.category = select.value;
  getNewsInfoList(pageInfo.value);
  console.log(input.value);
  console.log(select.value);
};
onMounted(() => {
  getNewsInfoList();
});
const handleSizeChange = (val) => {
  pageInfo.value.pageSize = val;
  getNewsInfoList();
  console.log(`每页 ${val} 条`);
};
const handleCurrentChange = (val) => {
  pageInfo.value.currentPage = val;
  getNewsInfoList();
  console.log(`每页 ${val} 条`);
};
const dialogVisibleNewsAdd = () => {
  newsFormEmpty();
  dialogFlag.value = 1;
  dialogVisible.value = true;
};
const dialogVisibleNewsUpdata = (val) => {
  title.value = "修改新闻信息";
  console.log(val);
  newsForm.value.id = val.id;
  newsForm.value.category = val.category;
  newsForm.value.title = val.title;
  newsForm.value.href = val.href;
  newsForm.value.des = val.des;
  dialogFlag.value = 2;
  dialogVisible.value = true;
};
const dialogVisibleNewsDelete = (val) => {
  newsForm.value.id = val.id;
  newsForm.value.category = val.category;
  newsForm.value.title = val.title;
  newsForm.value.href = val.href;
  newsForm.value.des = val.des;
  dialogVisible2.value = true;
};
const newsFormEmpty = () => {
  newsForm.value.id = null;
  newsForm.value.category = null;
  newsForm.value.title = "";
  newsForm.value.href = "";
  newsForm.value.des = "";
};
const cancel = () => {
  dialogVisible.value = false;
  newsFormEmpty();
};
const newsAdd = () => {
  save(newsForm.value);
  ElNotification.success("新闻添加成功");
  dialogVisible.value = false;
  getNewsInfoList();
};
const newsUpdate = () => {
  update(newsForm.value);
  ElNotification.success("新闻修改成功");
  dialogVisible.value = false;
  getNewsInfoList();
};
const newsDelete = () => {
  remove(newsForm.value);
  ElNotification.success("新闻删除成功");
  getNewsInfoList();
  dialogVisible2.value = false;
};
</script>
<style lang="scss" scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
